<template>
  <div class="app-container index">
    <!-- 轮播图 -->
    <el-carousel width="1260px">
      <el-carousel-item @click="handlePic(1)">
        <img src="~@/assets/icon/bannaer6.jpeg" class="imgBannaer" />
        <img class="carouselName" src="~@/assets/icon/bannaerTitle1.png"/>
      </el-carousel-item>
      <el-carousel-item v-if="picList.length>1" @click="handlePic(2)">
        <img src="~@/assets/icon/bannaer1.jpg" class="imgBannaer" />
        <img class="carouselName" src="~@/assets/icon/bannaerTitle2.png"/>
      </el-carousel-item>
      <el-carousel-item v-if="picList.length>2" @click="handlePic(3)">
        <img src="~@/assets/icon/bannaer2.jpg" class="imgBannaer" />
        <img class="carouselName" src="~@/assets/icon/bannaerTitle3.png"/>
      </el-carousel-item>
      <el-carousel-item v-if="picList.length>3" @click="handlePic(4)">
        <img src="~@/assets/icon/bannaer5.jpg" class="imgBannaer" />
        <img class="carouselName" src="~@/assets/icon/bannaerTitle4.png"/>
      </el-carousel-item>
    </el-carousel>
    <!-- 导航滚动 -->
    <div class="navScrollbar">
      <div class="nav" @click="scrollToTop(1)">
        <p>
          <span>专题图</span>
          <span>探查类/区划类/...</span>
        </p>
        <img src="~@/assets/icon/scrllbar1.png" alt="">
      </div>
      <div class="nav" @click="scrollToTop(2)">
        <p>
          <span>信息分析</span>
          <span>房屋抗震性能快速...</span>
        </p>
        <img src="~@/assets/icon/scrllbar2.png" alt="">
      </div>
      <div class="nav" @click="scrollToTop(3)">
        <p>
          <span>信息成果</span>
          <span>评估报告/灾情报表</span>
        </p>
        <img src="~@/assets/icon/scrllbar3.png" alt="">
      </div>
      <div class="nav" @click="scrollToTop(4)">
        <p>
          <span>信息检索</span>
          <span>抗震设防参数/活断...</span>
        </p>
        <img src="~@/assets/icon/scrllbar4.png" alt="">
      </div>
      <div class="nav" @click="scrollToTop(5)">
        <p>
          <span>最新资料</span>
          <span>最新资料/最新案例</span>
        </p>
        <img src="~@/assets/icon/scrllbar5.png" alt="">
      </div>
    </div>
    <div class="scrollContent">
      <!-- 专题图 -->
      <p class="titleType" id="ztbScrollTop"><span class="blod">专题图</span></p>
      <div class="card">
        <div class="leftCard">
          <p><span>探查类/区划类</span><span>评估类/综合类</span></p>
        </div>
        <div class="rightCard">
          <el-row>
            <el-col :span="8" class="col1" @click="toZtt(2)">
              <div class="cardItem">
                <div>
                  <p class="zttTitle">全国地震灾害风险区划图<img src="../assets/icon/hot.png" alt="" style="margin-left: 10px;"></p>
                  <span class="describe">基于矢量数据图层实现全国地震灾害风险相关信息的图形化渲染和动态信息展示</span>
                  <p class="view">查看详情<el-icon>
                      <DArrowRight />
                    </el-icon></p>
                </div>
              </div>
            </el-col>
            <el-col :span="8" class="col2" @click="toZtt(3)">
              <div class="cardItem">
                <div>
                  <p class="zttTitle">房屋加固优先级区划图<img src="../assets/icon/hot.png" alt="" style="margin-left: 10px;"></p>
                  <span class="describe">基于矢量数据图层实现地震灾害风险防治相关信息的图形化渲染和动态信息展示</span>
                  <p class="view">查看详情<el-icon>
                      <DArrowRight />
                    </el-icon></p>
                </div>
              </div>
            </el-col>
            <el-col :span="8" class="col3" @click="toZtt(4)">
              <div class="cardItem">
                <div>
                  <p class="zttTitle">重点隐患分布图<img src="../assets/icon/hot.png" alt="" style="margin-left: 10px;"></p>
                  <span class="describe">基于矢量数据图层实现重点隐患分布的成果展示</span>
                  <p class="view">查看详情<el-icon>
                      <DArrowRight />
                    </el-icon></p>
                </div>
              </div>
            </el-col>

            <el-col :span="8" class="col4" @click="toZtt(5)">
              <div class="cardItem">
                <div>
                  <p class="zttTitle">活断层避让分布图<img src="../assets/icon/hot.png" alt="" style="margin-left: 10px;"></p>
                  <span class="describe">基于矢量数据图层实现活断层避让分布的成果展示</span>
                  <p class="view">查看详情<el-icon>
                      <DArrowRight />
                    </el-icon></p>
                </div>
              </div>
            </el-col>

            <el-col :span="8" class="col5">
              <div class="cardItem" @click="toZtt(6)">
                <div>
                  <p class="zttTitle">抗震加固工程分布图<img src="../assets/icon/hot.png" alt="" style="margin-left: 10px;"></p>
                  <span class="describe">基于矢量数据图层实现抗震加固工程分布的成果展示</span>
                  <p class="view">查看详情<el-icon>
                      <DArrowRight />
                    </el-icon></p>
                </div>
              </div>
            </el-col>

            <el-col :span="8" class="col6">
              <div class="cardItem">
                <div>
                  <p class="zttTitle">综合减灾社区分布图<img src="../assets/icon/hot.png" alt="" style="margin-left: 10px;"></p>
                  <span class="describe">基于矢量数据图层实现综合减灾社区分布的成果展示</span>
                  <p class="view" @click="toZtt(7)">查看详情<el-icon>
                      <DArrowRight />
                    </el-icon></p>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="info">
        <!-- 信息成果 -->
        <div class="infoLeft">
          <p class="titleType"><span class="blod">信息成果</span><span class="button" @click="toViewMore">查看更多<el-icon>
                <DArrowRight />
              </el-icon></span></p>
          <div class="infoLeftContent">
            <div class="leftInfoList">
              <p v-for="(item, index) in xxcgList.slice(0, 4)" @click="handleInfo(item)">
                <el-tooltip effect="customized" :content="item.achievementName" placement="bottom" :hide-after="100">
                  <span class="reportName"><span></span>{{ item.achievementName }}</span>
                </el-tooltip>
                <span>{{ item.achievementDate }}</span>
              </p>
            </div>
            <div class="rightInfoList">
              <p v-for="(item, index) in xxcgList.slice(4, 8)" @click="handleInfo(item)">
                <el-tooltip effect="customized" :content="item.achievementName" placement="bottom" :hide-after="100">
                  <span class="reportName"><span></span>{{ item.achievementName }}</span>
                </el-tooltip>
                <span>{{ item.achievementDate }}</span>
              </p>
            </div>
          </div>

        </div>
        <!-- 信息分析 -->
        <div class="infoRight">
          <p class="titleType" id="xxfxScroll"><span class="blod">信息分析</span></p>
          <img src="~@/assets/icon/infoAnalyze.png" alt=""  @click="toXxfx">
        </div>
      </div>
      <div class="infoSearch">
        <p class="titleType" id="xxjsScroll"><span class="blod">信息检索</span></p>
        <div class="searchImg">
          <div @click="toKz">
            <img src="~@/assets/icon/search3.png" alt="">
            <span>抗震设防参数</span>
          </div>
          <div @click="toHdc">
            <img src="~@/assets/icon/search2.png" alt="">
            <span>活断层信息</span>
          </div>
          <div @click="toYj">
            <img src="~@/assets/icon/search4.png" alt="">
            <span>应急避难场所</span>
          </div>
          <div @click="toLs">
            <img src="~@/assets/icon/search1.png" alt="">
            <span>历史地震事件</span>
          </div>
        </div>
      </div>
    </div>
    <div class="visitLatest" id="zxzlScroll">
      <div>
        <div class="visit">
          <p style="color: #fff;background-color: #107ce5;font-weight: bold;padding-left: 20px;">访问排行</p>
          <div class="list">
            <div class="visitList">
              <p v-for="(item, index) in visitList.slice(0, 5)">
                <span :class="[index<3?'buleNum':'num']">{{ '0' + (index + 1) }}<span></span></span>
                <el-tooltip effect="customized" :content="item.modules" placement="bottom">
                  <span class="ellipsis">{{ item.modules }}</span>
                </el-tooltip>
              </p>
            </div>
            <div class="visitList">
              <p v-for="(item, index) in visitList.slice(5, 10)">
                <span class="num">{{ (index + 6) > 9 ? (index + 6) : '0' + (index + 6) }}<span></span></span>
                <el-tooltip effect="customized" :content="item.modules" placement="bottom">
                  <span class="ellipsis">{{ item.modules }}</span>
                </el-tooltip>
              </p>
            </div>
          </div>
          <span class="visitBtn btn" @click="toFw">查看更多</span>
        </div>
        <el-divider direction="vertical" border-style="dashed"></el-divider>
        <div class="visit">
          <p>
            <span :class="[index == 0 ? 'active' : 'text']" @click="changeIndex(0)">最新资料</span>
            <span :class="[index == 1 ? 'active' : 'text']" @click="changeIndex(1)">最新案例</span>
          </p>
          <div class="listLatest" style="flex-direction: column;">
            <div v-if="index == 0">
              <p v-for="(item,ind) in latestZlList" :key="ind" class="listP">
                <router-link target="_blank" :to="{ path: '/viewItemFile', query: { id: item.meansUploadAtt[0].attachId } }">
                  <span class="listName"><span></span>{{ item.meansName }}</span><span>{{ item.releaseDate }}</span>
              </router-link>
              </p>
            </div>
            <div v-if="index == 1">
              <p v-for="(item,ind) in latestAlList.slice(0,6)" :key="ind" class="listP">
                <router-link target="_blank" :to="{ path: '/viewItemFile', query: { id: item.meansUploadAtt[0].attachId } }">
                  <span class="listName"><span></span>{{ item.meansName }}</span><span>{{ item.releaseDate }}</span>
                </router-link>
              </p>
            </div>
          </div>
          <span class="latesttBtn btn" @click="toLatest">查看更多</span>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="footerContent">
        <div class="footerLeft">
          <p>联系我们</p>
          <p>
            <span>主办单位：中国地震灾害防御中心</span>
            <span>地址：北京市朝阳区民族园路9号</span>
            <span>邮编 100029</span>
          </p>
          <p>CopyRight©2014 All Rights Reserved 京ICP备07009313号-1 京公网安备××××××××××号</p>
        </div>
        <img src="../assets/icon/sydw.png" alt="">
      </div>
    </div>
  </div>
</template>

<script setup name="Index">
import { getRankList,getXxcgList,getProfileList,getCaseList,getRotationChart} from '@/api/index/accessRanking.js'
import { onMounted } from 'vue';
import {useWebsocket} from "@/utils/socket"
import {checkPermi} from "@/utils/permissionBtn"
const { proxy } = getCurrentInstance();
const router = useRouter()
const xxcgList = ref([])
const index = ref(0)
const visitList = ref([])

const latestZlList = ref([])

const latestAlList = ref([])
const picList = ref([])

function handlePic(num){
  if(picList.value.length>0){
    const routeUrl = router.resolve({
        path: "/viewItemFile",
        query:  { id: picList.value[num-1].meansUpload },
      });
      window.open(routeUrl.href, "_blank");
  }
}

// 专题图
// 跳转活断层
function toZtt(num) {
  switch (num) {
    case 1:
      router.push('/thematicMap/probeClass/activeFault')
      break;
    case 2:
      router.push('/thematicMap/divisionClass/earthquakeDisasterRisk')
      break;
    case 3:
      router.push('/thematicMap/divisionClass/houseReinforcementPriority')
      break;
    case 4:
      router.push('/thematicMap/evaluationClass/keyHiddenDanger')
      break;
    case 5:
      router.push('/thematicMap/probeClass/activeFault')
      break;
    case 6:
      router.push('/thematicMap/probeClass/seismicReinforcement')
      break;
    case 7:
      router.push('/thematicMap/evaluationClass/comprehensiveDisasterReduction')
      break;
    default:
      break;
  }
}

// 滚动顶部
function scrollToTop(num){
  switch (num) {
    case 1:
      document.getElementById('ztbScrollTop').scrollIntoView({ behavior: 'smooth' })
      break;
    case 2:
      document.getElementById('xxfxScroll').scrollIntoView({ behavior: 'smooth' })
      break;
    case 3:
      document.getElementById('xxfxScroll').scrollIntoView({ behavior: 'smooth' })
      break;
    case 4:
      document.getElementById('xxjsScroll').scrollIntoView({ behavior: 'smooth' })
      break;
    case 5:
      document.getElementById('zxzlScroll').scrollIntoView({ behavior: 'smooth' })
      break;      
    default:
      break;
  }
}

// 信息成果
function toViewMore(){
  router.push('/informationResult/evaluationReport/earthDamageLossPreEvaluation')
}
// 预览
function handleInfo(item){
  let query = {
    attachId: item.achievementUploadAtt[0].attachId,
    name: item.achievementUploadAtt[0].attachName,
  }
  if(item.achievementColumn.includes('地震现场人员伤亡分布及致死原因调查报表')){
    if(query.name.includes('.xls')){
      let flagDowon = true;
      flagDowon = checkPermi(item.dataOrigin,'dowon',item.achievementName,'评估报表')
      if(!flagDowon){
        proxy.$modal.msgWarning("暂无权限下载");
        return;
      }
      location.href = import.meta.env.VITE_APP_BASE_API + "/attachment/downLoadFile?attachId=" + encodeURIComponent(query.attachId);
    }else{
      let flagView = true;
      flagView = checkPermi(item.dataOrigin,'look',item.achievementName,'评估报表')
      if(!flagView){
        proxy.$modal.msgWarning("暂无权限查看");
        return;
      }
      const routeUrl = router.resolve({
          path: "/viewItemFile",
          query: { id: query.attachId, name: query.name,  },
        });
        window.open(routeUrl.href, "_blank");
      }
  }else{
    let flag = true;
    flag = checkPermi(item.dataOrigin,'look',item.achievementName,'评估报告')
    if(!flag){
      proxy.$modal.msgWarning("暂无权限查看");
      return;
    }
    const routeUrl = router.resolve({
      path: "/viewItemFile",
      query: { id: query.attachId, name: query.name },
    });
    window.open(routeUrl.href, "_blank");
  }
 
  // if(query.name.includes('.xls')){
  //   if(item.dataOrigin==0||item.dataOrigin==5||item.dataOrigin==6||item.dataOrigin==10){
  //       location.href = import.meta.env.VITE_APP_BASE_API + "/attachment/downLoadFile?attachId=" + encodeURIComponent(query.attachId);
  //   }else{
  //       location.href =  import.meta.env.VITE_APP_BASE_API + "/other/Download" + '?id=' + query.attachId + '&name=' + query.name + '&dataOrigin='+item.dataOrigin;
  //   }
  // }else{
  //   const routeUrl = router.resolve({
  //       path: "/viewItemFile",
  //       query: { id: query.attachId, name: query.name },
  //     });
  //     window.open(routeUrl.href, "_blank");
  // }
}

// 信息分析
function toXxfx() {
  router.push('/informationAnalysis/rapidSeismicEvaluaBuild')
}
// 最新访问
function toFw() {
  router.push('/home/accessRanking')
}

// 跳转抗震设防参数
function toKz(){
    router.push('/informationRetrieval/seismicParameter')
}

// 跳转活断层信息
function toHdc(){
    router.push('/informationRetrieval/activeFaultInfo')
}

// 跳转应急避难场所
function toYj(){
    router.push('/informationRetrieval/emergencyShelter')
}

// 跳转历史地震信息
function toLs(){
    router.push('/informationRetrieval/historicalSeismicInformation')
}

// 最新资料 案例
function toLatest() {
  if (index.value == 0) {
    router.push('/home/latestProfile')
  } else {
    router.push('/home/latestCase')
  }
}

// 最新点击
function changeIndex(num) {
  if(index.value == num) return;
  index.value = num
  if(num==1){
    getCase()
  }
}

// 最新资料
const getProfile=()=>{
  getProfileList({page:1,rows:10,releaseStatus:0,}).then(res=>{
    console.log(res.data)
    latestZlList.value = res.data?res.data:[]
  })
}

// 典型案例
const getCase =()=>{
  getCaseList({page:1,rows:10,releaseColumn:'典型案例',releaseStatus:0,}).then(res=>{
    latestAlList.value = res.data.rows?res.data.rows:[]
  })
}
// 获取轮播图案例数据
const getPic =()=>{
  getRotationChart().then(res=>{
    picList.value = res.data?res.data:[]
  })
}
// 信息成果
const getXxcg = ()=>{
  getXxcgList({releaseStatus:0}).then(res=>{
    xxcgList.value = res.data?res.data:[];
  })
}
// 访问排行
const getListRank = () => {
  getRankList('month').then(res => {
      visitList.value = res.data ? res.data : [];
    })
}
// WebSocket
const ws = useWebsocket()
ws.onmessage = (e) => {
    if(JSON.parse(e.data).moduleType=='infAchievement'){
      getXxcg();
    }else if(JSON.parse(e.data).moduleType=='rotationChart'){
      getPic();
    }
  };

//页面卸载，关闭socket
onUnmounted(() => {
  ws.close();
});
onMounted(()=>{
  getPic();
  getListRank();
  getXxcg();
  getProfile();
})
</script>

<style scoped lang="scss">
.app-container {
  padding: 0px !important;
  background-color: #fff;
}

.index {
  width: 100%;
  margin: 0 auto;
  :deep(.el-carousel){
    position: relative;
    .carouselName{
      position: absolute;
      width: 570px;
      height: 42px;
      top: 50%;
      left: 50%;
      margin-left: -273px;
      margin-top: -66px;
      display: inline-block;
      // line-height: 300px;
      text-align: center;
      font-size: 30px;
      color: #fff;
      font-weight: bold;
    }
  }

  :deep(.el-carousel__container) {
    width: 1260px;
    margin: 0 auto;
  }

  .imgBannaer {
    width: 1260px;
    height: 300px;
  }

  .navScrollbar {
    margin: 20px auto;
    width: 1260px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    grid-gap: 20px;
    .nav {
      cursor: pointer;
      width: 236px;
      height: 100px;
      border-radius: 6px 6px 6px 6px;
      padding: 30px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      p{
        display: flex;
        flex-direction: column;
        line-height: 30px;
        color: #4F608A;
        :nth-child(1){
          font-size: 18px;
          font-weight: 400;
        }
      }
    }
    >:nth-child(1){
      background: #EFF3FF;
    }
    >:nth-child(2){
      background: #FBF5F0;
    }
    >:nth-child(3){
      background: #EDF8F6;
    }
    >:nth-child(4){
      background: #FFF2F2;
    }
    >:nth-child(5){
      background: #FCEFFF;
    }
  }

  .scrollContent {
    width: 1260px;
    margin: 0 auto;

    .titleType {
      margin: 30px 0 20px;
      height: 52px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #0a0039;
      padding: 0;

      .blod {
        font-size: 24px;
        font-weight: bold;
      }

      .button {
        width: 120px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #0a0039;
        color: #0a0039;
        border-radius: 25px;
        opacity: 1;
        font-size: 16px;
        cursor: pointer;
      }
    }
  }

  .card {
    width: 100%;
    height: 388px;
    display: flex;
    flex-direction: row;

    .leftCard {
      width: 310px;
      height: 388px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      background: url(@/assets/icon/zttbg.png) no-repeat center center;
      font-weight: 400;

      p {
        font-size: 20px;
        display: flex;
        flex-direction: column;

        span {
          display: inline-block;
          line-height: 40px;
        }
      }
    }

    .rightCard {
      display: flex;
      flex: 1;
      background-color: #fafbfe;

    :deep(.el-col) {
      height: 194px;
      box-sizing: border-box;
      overflow: hidden;

      .cardItem:hover {
        background: #107CE5;
        color: #fff;

        .zttTitle {
          color: #fff;
        }

        .view {
          color: #fff;
        }
      }

      .cardItem {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        font-weight: 400;
        color: #999;
        cursor: pointer;

        >div {
          width: 70%;
          margin: 0 40px 0px 30px;
        }

        .view {
          font-size: 16px;
          color: #333;
          .el-icon {
            position: relative;
            top: 3px;
          }
        }

        .zttTitle {
          color: #333;
          font-size: 18px;
          font-weight: bold;

          img {
            height: 18px;
          }
        }
        .describe{
          display: inline-block;
          height: 60px;
        }
      }
    }
    .col1 {
      border-right: 1px dashed #CAD1E2;
      border-bottom: 1px dashed #CAD1E2;
    }

    .col2 {
      border-bottom: 1px dashed #CAD1E2;
    }

    .col3 {
      border-left: 1px dashed #CAD1E2;
      border-bottom: 1px dashed #CAD1E2;
    }

    .col4 {
      border-right: 1px dashed #CAD1E2;
    }

    .col6 {
      border-left: 1px dashed #CAD1E2;
    }
  }
  }

  .info {
    width: 100%;
    display: flex;
    flex-direction: row;

    .infoLeft {
      padding-right: 50px;
      display: flex;
      flex-direction: column;
      flex: 1;

      .infoLeftContent {
        display: flex;
        flex: 1;
        flex-direction: row;
        grid-gap: 40px;

        .leftInfoList,
        .rightInfoList {
          padding: 0;
          margin: 0;
          width: 50%;
          padding-left: 10px;

          p {
            padding: 0;
            margin: 0;
            height: 25%;
            border-bottom: 1px dashed #CAD1E2;
            list-style: none;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            font-size: 16px;
            cursor: pointer;

            .reportName {
              display: inline-block;
              width: 300px;
              overflow: hidden; // 溢出隐藏
              text-overflow: ellipsis; // 溢出用省略号显示
              white-space: nowrap; // 规定段落中的文本不进行换行
              span{
                display: inline-block;
                width: 6px;
                height: 6px;
                border-radius: 50%;
                background-color: #666;
                margin-right: 10px;
                position: relative;
                top: -4px;
              }
            }

            :nth-child(2) {
              color: #999;
              font-size: 14px;
              float: right;
            }
          }

          p:hover {
            background-color: #EEF5FF;

            .reportName {
              color: #107CE5;
              font-weight: bold;
            }
          }
        }

        // .rightInfoList {
        //   width: 50%;
        //   background: #05355b;

        // }
      }

    }

    .infoRight {
      width: 316px;
      display: flex;
      flex-direction: column;

      img {
        width: 100%;
        height: 290px;
        cursor: pointer;
      }
    }
  }

  .infoSearch {
    width: 100%;

    .searchImg {
      display: flex;
      flex-direction: row;
      grid-gap: 28px;
      height: 216px;

      div {
        width: 294px;
        cursor: pointer;
        position: relative;
        img{
          width: 294px;
          height: 216px;
        }
        span{
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.5);
          display: flex;
          align-items: center;
          justify-content: center;  
          // font-family: serif;
          color: #fff;
          font-size: 22px;
          font-weight: bolder;;
          display: none;
        }
      }
      div:nth-child(1):hover{
          span{
            display: flex;
          }
          // box-shadow: 0 0 6px 3px #e3e6ea;
      }
      div:nth-child(2):hover{
          span{
            display: flex;
          }
      }
      div:nth-child(3):hover{
          span{
            display: flex;
          }
      }
      div:nth-child(4):hover{
          span{
            display: flex;
          }
      }
    }
  }

}

:deep(.el-carousel__indicators--horizontal) {
  bottom: 20px;
}

.visitLatest {
  width: 100%;
  background-color: #f0f4ff;
  margin-top: 40px;

  >div {
    width: 1260px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;

    .visit {
      height: 100%;
      color: #0A0039;
      flex-direction: column;
      display: flex;
      flex: 1;

      >p {
        height: 70px;
        line-height: 70px;
        padding: 0px;
        margin: 0px;
        font-size: 20px;
        display: flex;
        color: #0a0039;
        align-items: center;

        .active {
          display: inline-block;
          font-weight: bold;
          color: #fff;
          padding: 0px 20px;
          background: linear-gradient(180deg, #107CE5 0%, #9FD0FF 100%);
          cursor: pointer;
        }

        .text {
          display: inline-block;
          font-size: 20px;
          padding: 20px;
          cursor: pointer;
        }
      }

      .list {
        width: 100%;
        height: 350px;
        display: flex;
        flex-direction: row;
        grid-gap: 40px;

        .visitList {
          display: flex;
          flex-direction: column;
          width: 50%;
          height: 100%;

          p {
            height: 70px;
            line-height: 70px;
            border-bottom: 1px solid #b3bbce;
            padding: 13px;
            margin: 0;
            display: flex;
            align-items: center;
          }

          p:hover {
            background-color: #d2e1f9;

            .num {
              color: #107ce5;
              span{
                background-color: #107CE5;
              }
            }
            .buleNum{
              span{
                background-color: #107CE5;
              }
            }

            .ellipsis {
              color: #107ce5;
              font-weight: 400;
              cursor: pointer;
            }
          }
          .buleNum{
            text-align: center;
            line-height: 58px;
            width: 50px;
            height: 58px;
            margin-right: 10px;
            color: #107CE5;
            font-size: 22px;
            font-weight: 400;
            display: inline-block;
            span{
                display: inline-block;
                width: 1px;
                height: 30px;
                background-color: #b3bbce;
                margin-left: 5px;
                transform: rotate(20deg);
                position: relative;
                right: -7px;
                top: 7px;
              }
          }
          .num {
            text-align: center;
            line-height: 58px;
            width: 50px;
            height: 58px;
            margin-right: 10px;
            color: #999999;
            font-size: 22px;
            font-weight: 400;
            display: inline-block;
            span{
                display: inline-block;
                width: 1px;
                height: 30px;
                background-color: #b3bbce;
                margin-left: 5px;
                transform: rotate(20deg);
                position: relative;
                right: -7px;
                top: 7px;
              }
          }

          .ellipsis {
            display: inline-block;
            width: 180px;
            font-size: 16px;
            overflow: hidden; // 溢出隐藏
            text-overflow: ellipsis; // 溢出用省略号显示
            white-space: nowrap; // 规定段落中的文本不进行换行
          }
        }

      }

      .listLatest {
        width: 100%;
        display: flex;
        flex-direction: row;

        >div {
          padding: 0;
          margin: 0;
          height: 350px;

          p {
            padding: 0;
            padding-top: 32px;
            margin: 0;
            list-style: none;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            font-size: 16px;
            cursor: pointer;
            .listName{
              display: inline-block;
              width: 450px;
              overflow: hidden; // 溢出隐藏
              text-overflow: ellipsis; // 溢出用省略号显示
              white-space: nowrap; // 规定段落中的文本不进行换行
              span{
                display: inline-block;
                width: 6px;
                height: 6px;
                border-radius: 50%;
                background-color: #666;
                margin-right: 10px;
                position: relative;
                top: -4px;
              }
            }
            :nth-child(2) {
              color: #999;
              font-size: 16px;
            }
          }

          p:hover {
            .listName {
              color: #107CE5;
              font-weight: bold;
            }
          }
        }
      }

      .btn {
        width: 100px;
        height: 40px;
        font-size: 16px;
        text-align: center;
        line-height: 40px;
        margin: 30px 0px 0px;
      }

      .latesttBtn,
      .visitBtn {
        background: #107ce5;
        border: 2px solid #107ce5;
        color: #fff;
        cursor: pointer;
      }
    }

    .latest {
      flex: 1;
      height: 100%;
    }

    .el-divider--vertical {
      display: inline-block;
      width: 2px;
      height: 600px; //更改竖向分割线长度
      color: #b3bbce;
      margin: 0 30px;
    }

  }
}

.footer {
  width: 100%;
  height: 180px;
  margin: 0 auto;
  background: #05355b;
  color: #fff;

  .footerContent {
    width: 1260px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .footerLeft {
      width: 650px;
      font-size: 16px;

      p:nth-child(1) {
        font-size: 18px;
      }

      p:nth-child(2) {
        display: flex;
        justify-content: space-between;
      }
    }

    img {
      width: 450px;
    }
  }
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>

<style>
.el-popper.is-customized {
  /* Set padding to ensure the height is 32px */
	background: #dddfe5;
}

.el-popper.is-customized .el-popper__arrow::before {
	background: #dddfe5;
}
</style>

